<template>
  <div :id="id" class="chart-box" />
</template>

<script>
import * as echarts from 'echarts'

export default {
  props: {
    id: {
      type: String,
      default: 'score-chart'
    },
    data: {
      type: Array,
      default() {
        return []
      }
    },
    title: {
      type: String,
      default: '标题'
    },
    xType: {
      type: String,
      default: 'time'
    }
  },
  data() {
    return {
      chart: null
      // data: []
    }
  },
  watch: {
    // data(newValue, oldValue) {
    //   console.log({ newValue, oldValue })
    //   if (newValue) {
    //     this.initChart()
    //   }
    // }
  },
  mounted() {
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', () => {
      this.chart.resize()
    })
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        title: {
          text: this.title,
          textStyle: {
            color: '#FFFFFF',
            fontSize: 14
          },
          left: 10,
          top: 10
        },
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#F35968' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#3CD5A7' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        },
        tooltip: {
          trigger: 'item',
          axisPointer: {
            lineStyle: {
              width: 10,
              color: '#172758'
            },
            z: 1
          },
          backgroundColor: 'rgba(37, 69, 125, 0.75)',
          textStyle: {
            color: '#fff'
          }
        },
        legend: [
          {
            left: '82%',
            top: 10,
            icon: 'circle',
            itemWidth: 8,
            itemHeight: 8,
            textStyle: {
              color: '#F35968'
            },
            data: ['超重数']
          }
        ],
        xAxis: [
          {
            type: this.xType,
            minInterval: 3600 * 24 * 1000,
            axisLine: {
              lineStyle: {
                color: '#273B74'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#598FE6'
              }
            },
            splitLine: {
              show: false // 清除线
            }
          }
        ],
        yAxis: [
          {
            boundaryGap: false,
            type: 'value',
            axisLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#598FE6',
                fontSize: 14
              }
            },
            splitLine: {
              lineStyle: {
                color: '#273B74'
              }
            }
          }
        ],
        series: [
          {
            name: '超重数',
            type: 'bar',
            barMaxWidth: 8,
            data: this.data,
            tooltip: {
              backgroundColor: 'rgba(255,255,255,0)', // 去除背景
              borderColor: 'rgba(255,255,255,0)',
              padding: 0,
              formatter(params) {
                var html = ''
                console.log(params)
                if (params.data.length === 3) {
                  html = `<div style="background: rgba(37, 69, 125, 0.75);padding: 10px;color: #fff;">
                                    <div>超重次数：${params.data[1]}</div>
                                    <div>平均超重占比：${(params.data[2] * 100).toFixed(2) }%</div>
                                </div>`
                } else {
                  html = `<div style="background: rgba(37, 69, 125, 0.75);padding: 10px;color: #fff;">
                                    <div>${params.data[0]}</div>
                                    <div>超重次数：${params.data[1]}</div>

                                </div>`
                }
                return html
              }
            }
          }
        ]
      })
      window.addEventListener('resize', () => {
        if (this.chart) {
          this.chart.resize()
        }
      })
    }
  }
}
</script>

<style scoped>
.chart-box {
  height: 100%;
  width: 100%;
}
</style>
